ant

2023-07-02 16:15| 来源: 网络整理| 查看: 265

由于项目需要变更css 缀所以需要执行以下代码

lessc --js --modify-var="ant-prefix=custom" ant-design-vue/dist/antd.variable.less modified.css

但是执行文案之后的css 就不能通过变量修改颜色等其他主题相关的配置通过查阅各种资料终于找当了相关方法这个地方主要是 lessc --modify-var 命令的运用

lessc --js --modify-var="ant-prefix=course-map" --modify-var="@base-primary=#D6AA56" --modify-var="@border-radius-base=4px" node_modules/ant-design-vue/dist/antd.variable.less modified2.css

这个地方有个小坑，光网上的给的一些公共变量修改以后只是修改一些组件的颜色，并不是全局的，这里可以通过查看源码然后找到相应的全局变量然后统一修改

动态修改全局主题 npm install -D webpack-theme-color-replacer/client

新建一个theme.js

/* eslint-disable @typescript-eslint/no-var-requires */ const client = require('webpack-theme-color-replacer/client'); // 替换颜色对象 const { generate } = require('@ant-design/colors'); // 提取ant-design的颜色 const theme = { color: '#D6AA56', // '#D6AA56' mode: 'dark', success: '#52c41a', // 成功色 warning: '#faad14', // 警告色 error: '#f5222f' // 错误色 }; function getAntdColors(color) { return generate(color); } function getThemeColors(color) { const _color = color || theme.color; const replaceColors = getAntdColors(_color); return replaceColors; } // 动态修改颜色方法 function changeThemeColor(newColor) { const promise = client.changer.changeColor({ newColors: getThemeColors(newColor) }); return promise; } // 初始化颜色 function modifyVars(color) { const _color = color || theme.color; const palettes = getAntdColors(_color); const primary = palettes[5]; // ;'#ff00ff' return { 'border-radius-base': '5px', 'btn-border-radius-base': '5px', 'border-radius-sm': '2px', 'table-border-radius-base': '2px', 'bg-color': '#f2f2f2', 'primary-color': primary, 'btn-primary-color': '#fff', 'text-color': '#333333', // 主文本色 'text-color-secondary': '#666666', // 次文本色 'success-color': theme.success, 'warning-color': theme.warning, 'error-color': theme.error, 'processing-color': primary, 'ant-prefix': 'course-map' }; } module.exports = { getThemeColors, changeThemeColor, modifyVars };

在vue.config.js 中配置

const { getThemeColors, modifyVars } = require('./src/utils/theme'); const ThemeColorReplacer = require('webpack-theme-color-replacer'); //配置less loader css: { // 是否分离css true:分离css，会造成css无法热更新，false：会把css打包进js中，js一更新css自然更新 extract: process.env.NODE_ENV !== 'development', sourceMap: false, loaderOptions: { less: { // 配置全局css变量或者在css文件中添加 globalVars: {}, modifyVars: modifyVars(), javascriptEnabled: true } } }, configureWebpack() { const config = { plugins: [ openGzip(), new ThemeColorReplacer({ fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名，支持[contenthash]和[hash]。 matchColors: getThemeColors(), // 用于提取 css 文件的颜色数组，支持 rgb 和 hsl。 injectCss: true // 将 css 文本注入 js 文件，不再需要下载 `theme-colors-xxx.css` }) ] }; if (IS_OPEN_PREVIEW_PLUGIN) { config.plugins.push(previewBuild()); } return config; },

在页面中使用

import { changeThemeColor } from '@/utils/theme'; changeThemeColor(data.primaryColor);

【本文地址】

公司简介

联系我们